<template>
  <a-modal
    width="700px"
    :footer="null"
    :maskClosable="false"
    :closable="false"
    :mask="false"
    v-model:open="modalShow"
    :wrap-style="{ overflow: 'hidden' }"
  >
    <template #title>
      <modalTitle @close="modalShow = false" :isSearchInput="false" :title="'一老一小'"></modalTitle>
    </template>
    <div style="padding: 0 10px 20px 10px">
      <div class="top">
        <div :class="isChecked == 0 ? 'top_item_checked' : 'top_item'" @click="isCheckedChange('')">
          <div class="top_item_leftIcon"></div>
          <div class="top_item_name">全部</div>
          <div class="top_item_num">{{ total }}</div>
        </div>
        <div :class="isChecked == 1 ? 'top_item_checked' : 'top_item'" @click="isCheckedChange('1')" style="margin: 0 10px">
          <div class="top_item_leftIcon"></div>
          <div class="top_item_name">正常</div>
          <div class="top_item_num">{{ zcNum }}</div>
        </div>
        <div :class="isChecked == 2 ? 'top_item_checked' : 'top_item'" @click="isCheckedChange('2')">
          <div class="top_item_leftIcon"></div>
          <div class="top_item_name">异常</div>
          <div class="top_item_num">{{ ycNum }}</div>
        </div>
      </div>
      <mTable :titleData="titleData" :valueData="valueData" @click-btn="rowClick"></mTable>
      <!-- <modalPage :total="500"></modalPage> -->
    </div>
  </a-modal>
</template>
<script setup>
import $api from "@/utils/request.js"
import { reactive, ref } from "vue"
import modalTitle from "../modalTitle.vue"
import mTable from "../mTable.vue"
import modalPage from "../modalPage.vue"

const modalShow = ref(false)
const titleData = [
  {
    name: "姓名",
    key: "name",
    style: {
      width: "80px"
    }
  },
  {
    name: "年龄",
    key: "age",
    style: {
      width: "60px"
    }
  },
  {
    name: "联系电话",
    key: "phone",
    style: {
      width: "100px"
    }
  },
  {
    name: "居住地址",
    key: "address",
    style: {
      flex: 1
    }
  },
  {
    name: "状态",
    key: "status_text",
    style: {
      width: "60px"
    }
  },
  {
    name: "操作",
    type: "btn",
    btns: ["查看详情"],
    style: {
      width: "100px"
    }
  }
]
const valueData = ref([])
const isChecked = ref("")
const emit = defineEmits(["rowClick"])
const rowClick = (e) => {
  emit("rowClick", e)
}
const isCheckedChange = (e) => {
  isChecked.value = e
  if (e !== "") {
    valueData.value = rawData.value.filter((d) => d.status === e)
  } else {
    valueData.value = rawData.value
  }
}
const zcNum = ref(0)
const ycNum = ref(0)
const total = ref(0)
const rawData = ref([])
const getData = async () => {
  const res = await $api.get("/api/V1/getZdgz", { type_status: 2 })
  if (res.code === 1) {
    let zc = 0
    let yc = 0
    res.data.data.forEach((e) => {
      if (e.status === "1") {
        zc += 1
      }
      if (e.status === "2") {
        yc += 1
      }
      e.status_text = e.status === "1" ? "正常" : "异常"
    })
    zcNum.value = zc
    ycNum.value = yc
    total.value = res.data.total
    rawData.value = res.data.data
    valueData.value = res.data.data
  }
}
const close = () => {
  modalShow.value = false
}
const show = (e) => {
  getData()
  modalShow.value = true
}
defineExpose({ show, close })
</script>
<style scoped lang="less">
.top {
  display: flex;
  width: 300px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 5px;
  .top_item_checked {
    flex: 1;
    padding: 5px 10px 5px 3px;
    display: flex;
    align-items: center;
    border: 2px solid #00c5db80;
    background: linear-gradient(180deg, rgba(0, 61, 60, 0.5) 0%, rgba(0, 117, 117, 0.5) 100%);
    .top_item_name {
      font-size: 10px;
      color: rgba(213, 242, 255, 1);
      font-weight: bold;
      flex: 1;
    }
    .top_item_num {
      color: rgba(158, 247, 255, 1);
      font-weight: bold;
      font-size: 12px;
    }
    .top_item_leftIcon {
      background-image: url("/img/myimg/lefticon1.png");
      background-size: 17px 15px;
      width: 17px;
      height: 15px;
    }
  }
  .top_item {
    flex: 1;
    padding: 5px 10px 5px 3px;
    display: flex;
    align-items: center;
    border: 2px solid #00c5db10;
    // border-image-source: ;

    background: linear-gradient(180deg, rgba(0, 61, 60, 0.5) 0%, rgba(0, 117, 117, 0.5) 100%);

    .top_item_name {
      font-size: 10px;
      color: rgba(213, 242, 255, 0.6);
      flex: 1;
    }
    .top_item_num {
      color: rgba(158, 247, 255, 0.6);
      font-weight: bold;
      font-size: 12px;
    }
    .top_item_leftIcon {
      background-image: url("/img/myimg/lefticon1.png");
      background-size: 17px 15px;
      width: 17px;
      height: 15px;
    }
  }
}
</style>
